
{include file="system@block/layui" /}
<div class="box">
<el-form ref="form" :model="form" label-width="80px" :inline="true">
  <el-form-item label="操作单号" style="width:300px">
    <el-input v-model="form.sn"></el-input>
  </el-form-item>
  <el-form-item label="会员">
    <el-select v-model="form.user_id" placeholder="请选择会员" filterable >
      <el-option v-for="item in UserList" :key="item.id" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="收银">
    <el-select v-model="form.cashier_id" placeholder="请选择收银" filterable >
      <el-option v-for="item in CashierList" :key="item.id" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>

	<el-form-item label="是否补录">
    <el-radio v-model="form.is_repair" label="1">是</el-radio>
    <el-radio v-model="form.is_repair" label="0">否</el-radio>
  </el-form-item>

<el-row>
  <el-button type="primary" plain @click="addPro">添加新产品</el-button>

</el-row>
<el-table
    :data="productData"
    border
    style="width: 100%">
    <el-table-column
      label="产品名称"
      fixed
      width="180">
      <template slot-scope="scope">
          <el-select v-model="scope.row.product_id" filterable  @change="proSelect(scope.$index)" placeholder="请选择产品">
            <el-option v-for="item,idx in products" :label="item.name" :value="item.id" :key="idx"></el-option>
        </el-select>
    </template>
    </el-table-column>

    <el-table-column
    width="150"
      label="数量">
      <template slot-scope="scope">
     <!-- <el-input v-model="scope.row.num"></el-input> -->
     <el-input-number v-model="scope.row.num" size="small" :min="0" @change="setProduct_price(scope.row, $event)"></el-input-number>

    </template>
    </el-table-column>


    <el-table-column
     width="120"
      label="金额">
      <template slot-scope="scope">
     <el-input v-model="scope.row.price2"></el-input>
    </template>
    </el-table-column>

     <el-table-column label="顾问" width="150">
  <template slot-scope="scope">
     <el-select v-model="scope.row.adviser_id" placeholder="请选择顾问">
      <el-option v-for="item,idx in AdviserList" :key="idx" :label="item.nick" :value="item.id"></el-option>
    </el-select>
    </template>
  </el-table-column>

   <el-table-column label="美容师" width="150">
  <template slot-scope="scope">
      <el-select v-model="scope.row.technician_ids" multiple placeholder="请选择美容师">
    <el-option
    v-for="item in TechnicianList"
    :key="item.id"
    :label="item.nick"
    :value="item.id">
    </el-option>
  </el-select>
    </template>
  </el-table-column>

<el-table-column label="结算方式" width="150">
    <template slot-scope="scope">
        <el-select v-model="scope.row.account_id"  placeholder="请选择结算方式">
        <el-option v-for="item,idx in AccountList" :key="idx" :label="item.name"  :value="item.id">
        </el-option>
      </el-select>
      </template>
  </el-table-column>

<el-table-column label="是否寄存" width="150">
    <template slot-scope="scope">
        <el-select v-model="scope.row.is_deposit"  placeholder="请选择结算方式">
        <el-option label="带走" :value="1"></el-option>
        <el-option label="寄存" :value="2"></el-option>
      </el-select>
      </template>
  </el-table-column>

  <el-table-column label="仓库" width="150">
      <template slot-scope="scope">
          <el-select v-model="scope.row.warehouse_id"  placeholder="请选择仓库">
          <el-option v-for="item,idx in warehouses" :label="item.name"   :value="item.id" :key="item.id">
          </el-option>
        </el-select>
      </template>
      </el-table-column>

    <el-table-column
    width="150"
      label="备注">
      <template slot-scope="scope">
     <el-input v-model="scope.row.bak"></el-input>
    </template>
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
     <el-button @click.prevent="removeItem(scope.$index)">删除</el-button>
    </template>
    </el-table-column>

  </el-table>

<!-- <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>消费详情</span>
  </div>
  <div  class="text item">
      现金消费：{{money1}}
  </div>
  <div  class="text item">
      余额消费：{{money2}}
  </div>
  <div  class="text item">
      会员卡消费：{{money3}}
  </div>
</el-card> -->
<el-form-item>
  <el-button type="primary" @click="onSubmit">立即创建</el-button>
  <el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<script>
    var mv = new Vue({
        el:'.box',
        data: {
            form: {
                 sn:'{$sn}',
                 user_id:'',
                 cashier_id:'',
                 is_repair:'0'
              },
            productData: [],
            CashierList:{:json_encode($cashiers)},
            UserList:{:json_encode($userList)},
            AdviserList:{:json_encode($advisers)},
            TechnicianList:{:json_encode($technicians)},
            warehouses:{:json_encode($warehouses)},
            AccountList:{:json_encode($accounts)},
            products:{:json_encode($productList)},
        },
        created(){
            this.defaultProduct = this.products[0]
        },
        methods: {
          setProduct_price(item, num) {
              item.price2 = (((item.price2||0)  / (item.old_number2||1)) * num).toFixed(2)
              item.old_number2 = num
          },
            addPro:function(){
              this.productData.push({
                product_id:Number(this.defaultProduct.id),
                name:this.defaultProduct.name,
                price1: this.defaultProduct.price1,
                price2: this.defaultProduct.price2,
                num:1,
                is_deposit:1,
              });
            },

          removeItem:function(idx){
            this.productData.splice(idx,1);
          },
          proSelect:function(idx){
            var that = this;
              let row = that.products.filter(function(p){
                 return p.id === that.productData[idx].product_id;
             })[0]
                Object.keys(row).map(key => {

                  if (key !== 'product_id') {
                    that.$set(that.productData[idx], key, row[key])
                  }
                })

          },
          onSubmit() {
            var that = this
            var params = {
                sn:that.form.sn,
                user_id:that.form.user_id,
                cashier_id:that.form.cashier_id,
                goods:that.productData,
                is_repair:that.form.is_repair
            };
            // console.log(params);
            // return;
            axios.post('{:url('addDo')}', params).then(function (response) {
                if(response.data.status === true){
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    that.$message({
                        type: 'success',
                        message: response.data.message,
                        onClose: function(){
                            parent.layer.close(index); //再执行关闭
                            window.parent.location.reload();
                        }
                    })
                }else{
                    that.$message({
                        type: 'error',
                        message: response.data.message
                    })
                }
            }).catch(function (error) {
                console.log(error);
            });
        },

        }
    })

</script>
